<!-- html模板 -->
<template>
    <h1>hello vue3</h1>
    <h2>2222</h2>
    <hr>
    <p>年龄：{{ age }}</p>
    <p>年龄2：{{ age+2 }}</p>
    <hr>
    <div>加粗文字：{{ info }}</div>
    <div v-html="info"></div>
    <hr>
    <p>血量：{{ blood }}</p>
    <!-- 添加事件 -->
    <button v-on:click="bloodFn()">血量-3</button>
    <hr>
    响应式变量
    <hr>
    <p>攻击力：{{ power }}</p>
    <button v-on:click="powerFn()">攻击力+10</button>
</template>
<script setup>
let age = 34;
let info = '<b>鲁迅</b>牛顿'

let blood = 1000;
function bloodFn(){
    // console.log(111);
    blood -= 3;
    console.log(blood);
}

import {ref} from 'vue';
// console.log('ref',ref);
let power = ref(100);
console.log('power',power);
function powerFn(){
    power.value = power.value + 10;
}
</script>